<template>
     <view
        v-if="props.sex"
        class="sex d-r d-flex a-center j-center"
        :class="{
            man: props.sex === 1,
            woman: props.sex === 2,
            hadAge: !!props.age,
        }"
    >   
        <image v-if="props.sex === 1" class="icon" src="/static/nvue/man.png" mode="" />
        <image v-if="props.sex === 2" class="icon" src="/static/nvue/woman.png" mode="" />
        <view v-if="props.age" class="age d-flex d-r a-center">
            <text class="text">
                {{ props.age }}
            </text>

        </view>
    </view>
</template>

<script setup lang="ts">
import { onMounted, reactive, watchEffect, toRefs } from "vue";
const props = defineProps({
    sex: {
        type: Number,
    },
    age: {
        type: Number,
    },
});

</script>
<style lang="scss" scoped>

//flex样式不要删  nvue中读不到公共样式
.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}



.sex {
    padding-left: 3rpx;
    padding-right: 3rpx;
    height: 30rpx;
    border-radius: 15rpx;
    color: #fff;
    font-size: 22rpx;
    .icon{
        width:30rpx;
        height:30rpx;
    }
    &.woman {
        background: #ff84cc;
    }
    &.man {
        background: #8498ff;
    }
    &.hadAge {
        padding-right: 10rpx;
    }
    .age{
        min-width:30rpx;
        justify-content: center;
        margin-left:-5rpx;
        .text{
            color: #fff;
            font-size: 22rpx;
        }
    }
}
</style>

